/*
 * @Author: hongbin
 * @Date: 2022-04-29 00:20:59
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-30 00:08:26
 * @Description:发送邮件
 */
import { FC, ReactElement } from "react";
import styled from "styled-components";
import { flexCenter } from "../../styled";

interface IProps {}

const SendMail: FC<IProps> = (): ReactElement => {
  return (
    <Container>
      <section>
        <input type="text" placeholder="你的邮箱" />
        <button>订阅</button>
      </section>
      <p>向你发送有关如意低代码平台的更新和新闻</p>
    </Container>
  );
};

export default SendMail;

const Container = styled.div`
  flex-direction: column;
  section {
    ${flexCenter};
    margin-bottom: 1vmin;
  }
  input {
    width: 30vw;
    outline: 0;
    position: relative;
    appearance: none;
    transition: all 0.1s ease;
    font-size: 1.5vmax;
    padding-left: 2rem;
    padding-right: 2rem;
    height: 6vmin;
    border-radius: 4vmax;
    border: 1px solid;
    border-color: ${(props) => props.theme.bg};
    background: #ffffff55;
    color: #fffae5;
    ::placeholder {
      color: #fffae5;
    }
  }
  button {
    width: 10vmax;
    border: none;
    height: 6vmin;
    border-radius: 5vmax;
    ${flexCenter};
    background: ${(props) => props.theme.bg};
    color: ${(props) => props.theme.fg};
    font-weight: bold;
    margin-left: 1vmax;
    cursor: pointer;
    font-size: 1.5vmax;
  }
  p {
    font-size: 1.2vw;
    letter-spacing: 1px;
    color: #bfb0fb;
    padding-left: 2rem;
  }
`;
